<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.ort">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script th:src="@{/layui/layui.js}" type="text/javascript"></script>
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
	 <style>
		 .cleanfloat::after{display: block; clear: both; content:""; visibility: hidden; height: 0;}/*清浮动*/
		 .cleanfloat li{list-style:none; float:left; font-size:30px; margin:0px; color:#ccc;}/*五角星样式*/
		 .hs{color:#f00;}/*五角星点击后样式*/
		 .layui-upload-img{
			 border: 1px solid #1E9FFF;
			 width: 237px;
			 height: 150px;
			 /*border-radius: 200px;*/
		 }
	 </style>
	</head>
	
	<body>
	  <div class="layui-panel" style="padding: 8px;">
    <fieldset class="layui-elem-field layui-border-blue">
        <legend>搜索信息</legend>
        <form class="layui-form" style="margin: 15px;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">商品名</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text"  name="name" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="padding-left:1px ;">商品id</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" type="text" name="id" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <a class="layui-btn layui-btn-primary" lay-submit="" lay-filter="searchBtn">
                            <i class="layui-icon layui-icon-search"></i>
                            搜索
                        </a>
                    </div>
                </div>
				<div class="layui-inline" style="margin-left:100px">
					<label class="layui-form-label">用户id</label>
					<div class="layui-input-inline">
						<input class="layui-input" type="text"  name="uid" autocomplete="off" />
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<a class="layui-btn layui-bg-blue" lay-submit="" lay-filter="searchBtn2">
							<i class="layui-icon layui-icon-search"></i>
							搜索指定用户评论
						</a>
					</div>
				</div>
            </div>


        </form>
    </fieldset>
         
</div>
	 <div id="commentG" style="height: 660px;background-color: white;">
<!--		  <div id="g1" class="layui-row" style="background-color:#FAFAFA;border-bottom: 1px solid black; width:100% ;">-->
<!--		  -->
<!--		  	  <div class="layui-col-xs4 layui-col-md4" style="background: red;height:150px;">-->
<!--		  	  	<img th:src="@{/img/header.jpg}" style="height: 150px;width: 100%;" />-->
<!--		  	  	-->
<!--		  	  </div>-->
<!--		  	  <div class="layui-col-xs8 layui-col-md8" style="height: 150px;font-family: '仿宋';">-->
<!--		  	  	<center><h1 style="margin-left: 10px; ">点致电脑</h1></center>-->
<!--		  	  	<div class="layui-col-xs6 layui-col-md6">-->
<!--		  	  	<p class=" layui-text" style="font-size: 25px;color: #FD482C;">商品编码:1552151</p>-->
<!--		  	  	</div>-->
<!--		  	  	<div class="layui-col-xs6 layui-col-md6">-->
<!--		  	  	<p class=" layui-text" style="font-size: 25px;color: #FD482C;">品牌商:sdsdsdsd</p>-->
<!--		  	  	</div>-->
<!--		  	  		<p class=" layui-text" style="font-size: 20px;margin-left: 25px;">简介</p>-->
<!--		  	  	-->
<!--		  	  	<div class="layui-col-xs6 layui-col-md6">-->
<!--		  	  	<p class=" layui-text" style="font-size: 20px;color: red;margin-top:10px  ;">价格:88￥/个</p>-->
<!--		  	  </div>-->
<!--		  	  <div class="layui-col-xs6  layui-col-md6" style="margin-top: 15px;">-->
<!--		  	  	<a style="font-size: 20px;margin-top:30px ;cursor: pointer" onclick="look(1)">查看评论-->
<!--		  	  	 <i class="layui-icon layui-icon-up"></i></a>-->
<!--		  	  </div>-->
<!--		  	  	</div>-->
<!--		  	  	<div class="layui-col-xs12 layui-col-md12 tab"  >-->
<!--		  	  		-->
<!--		  	  	</div>-->
<!--		  </div>-->
<!--	-->
<!--		-->
	 </div>
	  <script id="userT" type="text/html">
		  <table id="userTable" lay-filter="userTable"> </table>
	  </script>
	  <script id="pf" type="text/html">

		  {{# if(d.scoring===1){ }}
		  <ul class="cleanfloat">
			  <li style="color:#f00;">&#9733;</li>
			  <li>&#9733;</li>
			  <li>&#9733;</li>
			  <li>&#9733;</li>
			  <li>&#9733;</li>
		  </ul>
		  {{#}
		  else if(d.scoring===2){ }}
		  <ul class="cleanfloat">
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li>&#9733;</li>
			  <li>&#9733;</li>
			  <li>&#9733;</li>
		  </ul>
		  {{# }
		  else if(d.scoring ===3){ }}
		  <ul class="cleanfloat">
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li>&#9733;</li>
			  <li>&#9733;</li>
		  </ul>
		  {{# }
		  else if(d.scoring ===4){ }}
		  <ul class="cleanfloat">
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li>&#9733;</li>
		  </ul>
		  {{# }
		  else if(d.scoring===5){ }}
		  <ul class="cleanfloat">
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
			  <li style="color:#f00;">&#9733;</li>
		  </ul>
		  {{# } }}

	  </script>
		  <script id="tool" type="text/html">
			  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
</script>
	<script id="photo" type="text/html">
		{{# if(d.photo!=''){ }}
    <img src="/file/fc/showImg/{{d.photo}}">
    {{# }}}
	</script>
		<script>
			var $,table,layer;
			layui.use(['table','form','jquery','layer'],function(){
				 table=layui.table;var form=layui.form;
				 layer=layui.layer;
				$=layui.jquery;

				table.on('tool(userTable)',function (obj){
					var event=obj.event;
					if(event=='delete'){
						$.ajax({
							type:'post',
							url:'/goods/comments/delete',
							data:{
								id:obj.data.id
							} ,
							dataType:'json',
							success:function (res){
								layer.msg(res.msg);
								if(res.is){
									layui.table.reload('userTable');
								}
							}
						})
					}
				})
         var active={
         	addGoods:function (data){
				$('#commentG').html("");
				$.each(data,function (i,o){
					var str=' <div id="g'+o.id+'" class="layui-row" style="background-color:#FAFAFA;border-bottom: 1px solid black; width:100% ;">\n' +
							'\t\t  \n' +
							'\t\t  \t  <div class="layui-col-xs4 layui-col-md4" style="height:150px;">\n' +
							'\t\t  \t  \t<img src="/file/fc/showImg/'+o.photo+'" style="height: 150px;width: 100%;" />\n' +
							'\t\t  \t  \t\n' +
							'\t\t  \t  </div>\n' +
							'\t\t  \t  <div class="layui-col-xs8 layui-col-md8" style="height: 150px;font-family: \'仿宋\';">\n' +
							'\t\t  \t  \t<center><h1 style="margin-left: 10px; ">'+o.name+'</h1></center>\n' +
							'\t\t  \t  \t<div class="layui-col-xs6 layui-col-md6">\n' +
							'\t\t  \t  \t<p class=" layui-text" style="font-size: 25px;color: #FD482C;">商品编码:'+o.number+'</p>\n' +
							'\t\t  \t  \t</div>\n' +
							'\t\t  \t  \t<div class="layui-col-xs6 layui-col-md6">\n' +
							'\t\t  \t  \t<p class=" layui-text" style="font-size: 25px;color: #FD482C;">品牌商:'+o.brandOwner+'</p>\n' +
							'\t\t  \t  \t</div>\n' +
							'\t\t  \t  \t\t<p class=" layui-text" style="font-size: 20px;margin-left: 25px;">'+o.introduction+'</p>\n' +
							'\t\t  \t  \t\n' +
							'\t\t  \t  \t<div class="layui-col-xs6 layui-col-md6">\n' +
							'\t\t  \t  \t<p class=" layui-text" style="font-size: 20px;color: red;margin-top:10px  ;">价格:'+o.marketPrice+'￥/'+o.unit+'</p>\n' +
							'\t\t  \t  </div>\n' +
							'\t\t  \t  <div class="layui-col-xs6  layui-col-md6" style="margin-top: 15px;">\n' +
							'\t\t  \t  \t<a style="font-size: 20px;margin-top:30px ;cursor: pointer" onclick="look('+o.id+')">查看评论\n' +
							'\t\t  \t  \t <i class="layui-icon layui-icon-up"></i></a>\n' +
							'\t\t  \t  </div>\n' +
							'\t\t  \t  \t</div>\n' +
							'\t\t  \t  \t<div class="layui-col-xs12 layui-col-md12 tab"  >\n' +
							'\t\t  \t  \t\t\n' +
							'\t\t  \t  \t</div>\n' +
							'\t\t  </div>\n' +
							'\t\n' +
							'\t\t';
					$('#commentG').append(str);
				})

			}
		 }
				$.ajax({
					type:'post',
					url:'/goods/gc/find',
					dataType:'json',
					success:function (res){
                       if(res.is){
				active.addGoods(res.data);
					   }
					}
				})
				form.on('submit(searchBtn2)',function (data){
					var dataForm=data.field;
					if(dataForm.uid!='') {
						layer.open({
							type: 1,
							content: $('#userT').html(),
							btn: ['关闭'],
							area: ['1100px', '700px'],
							btnAlign: 'c'

						})
						table.render({
							elem: '#userTable',
							url: '/goods/comments/find',
							height: '550px',
							page: true,
							where: {
								uId: dataForm.uid
							},
							cols: [
								[
									{field: "uid", align: 'center', title: '用户id', width: 80},
									{field: "pid", align: 'center', title: '商品id', width: 80},
									{field: "scoring", align: 'center', title: '打分', width: 150, toolbar: '#pf'},
									{field: "content", title: '评论内容'},
									{field: "photo", title: '图片评论', width: 150, toolbar: '#photo'},
									{field: "createTime", align: 'center', title: '评论时间', width: 150},
									{
										fixed: 'right',
										align: 'center',
										title: '操作',
										width: 200,
										align: 'center',
										toolbar: '#tool'
									}
								]
							]
						})
					}else{
						layer.msg("请输入用户id")
					}

				})
				form.on('submit(searchBtn)',function (data){
					var dataForm=data.field;
					$.ajax({
						type:'post',
						url:'/goods/gc/seachFind',
						dataType:'json',
						data:{
							id:dataForm.id,
							name:dataForm.name
						},
						success:function (res){
							if(res.is){
								active.addGoods(res.data);
							}
						}
					})
				})
			})
			function look(id){
				if($('#g'+id+' i').hasClass("layui-icon-down")){
					// $('.layui-form-box').remove();
				$('#g'+id+' i').removeClass("layui-icon-down");
				$('#g'+id+' i').addClass("layui-icon-up");
				$('#g'+id+' .tab').hide();
			
				}else {
					// $('.layui-form-box').remove();
					$('#g'+id+' .tab').append('<table id="commentsTable'+id+'" lay-filter="commentsTable'+id+'"></table>');
					$('#g'+id+' i').removeClass("layui-icon-up");
				$('#g'+id+' i').addClass("layui-icon-down");
				$('#g'+id+' .tab').show();
				 table.render({
                	elem:'#commentsTable'+id,
                	url:'/goods/comments/find',
                	page:true,
					 where:{
                		pId:id
					 },
                	cols:[
                	   [
                	 {field:"uid",align:'center',title:'用户id',width:80},
                	 {field:"pid",align:'center',title:'商品id',width:80},
                	 {field:"scoring",align:'center',title:'打分',width:150,toolbar:'#pf'},
                	 {field:"content",title:'评论内容'},
                	 {field:"photo",title:'图片评论',width:150,toolbar:'#photo'},
                	 {field:"createTime",align:'center',title:'评论时间',width:150},
                	  {fixed:'right',align:'center',title:'操作',width:200,align:'center',toolbar:'#tool'}
                	]
                	]
                });
				 table.on('tool(commentsTable'+id+')',function (obj){
				 	var event=obj.event;
				 	if(event=='delete'){
				 		$.ajax({
						   type:'post',
						   url:'/goods/comments/delete',
						data:{
                         id:obj.data.id
						} ,
							dataType:'json',
							success:function (res){
						   	layer.msg(res.msg);
						   	if(res.is){
						   		layui.table.reload('commentsTable'+id);
							}
							}
						})
					}
				 })

				}
			}
		</script>
	</body>
</html>
